import React, {useState, useTransition} from 'react';

const App = () => {
  const [inpValue,setInpValue] = useState()
  const [count,setCount] = useState(100)

  // isPen 用来判断标记是否开启等待的状态
  // startTransition 是用来开启等待的方法
  const [isPen,startTransition] = useTransition()

  function btnClick(e){
    e.target.style.color = 'red'
    console.dir(e.target);
    // setCount(count + 1)

    // 开启非阻塞，当有其他数据更新的时候，优先更新其他数据
    startTransition(()=>{
      // 当正在更新的时候会将 isPen 的值设置为 true
      setCount(count + 1)
    })

  }

  // 计算一段代码或者一些代码执行所需要的时间
  // console.time('qqqqqqqqqqqqqqq')
  // document.createElement('div')
  // document.createElement('div')
  // document.createElement('div')
  // console.timeEnd('qqqqqqqqqqqqqqq')



  return (
    <div>
      <div> {inpValue} </div>
      <input type="text" value={inpValue} onChange={e=> setInpValue(e.target.value)} />

      <button onClick={btnClick}>{count}</button>

      {isPen && <div>1234567890</div>}
    </div>
  );
};

export default App;
